<template>
    <div class="musicList">
        <div class="musicList-top">
            <div class="title">发现好歌单</div>
            <div class="more">查看更多</div>
        </div>
        <div class="mlist">
            <div class="swiper-container" id="musicSwiper">
            <div class="swiper-wrapper">
                <router-link :to="{path:'/listView',query:{id:item.id}}" class="swiper-slide" v-for="(item,index) in state.musiclist" :key="index">
                    <img :src="item.picUrl" :alt="item.name">
                    <div class="name">{{item.name}}</div>
                    <div class="count">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-24gl-play"></use>
                        </svg>
                        <span style="font-size:10px;">{{changeValue(item.playCount)}}</span>
                    </div>
                </router-link>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
    import 'swiper/css/swiper.css'
    import Swiper from 'swiper'
    import {getMusicList} from '@/api/index'
    import { reactive,onMounted,onUpdated } from 'vue'
    import store from '@/store/index'
    export default{
        setup(){
            let state = reactive({
                musiclist:[]
            })
            const changeValue = (num)=>{
                let res = 0
                if(num >= 1000000000){
                    res = num/1000000000
                    res = res.toFixed(2)+ '亿'
                }else if(num >= 10000){
                    res = num/10000
                    res = res.toFixed(2)+ '万'
                }
                return res
            }
            onMounted(async ()=>{
                // 接口数据
                const result = await getMusicList()
                state.musiclist = result.data.result
                // store.commit('setPlayList',state.musiclist.tracks)
                // console.log(state.musiclist)
            })
            onUpdated(()=>{
                var swiper = new Swiper('#musicSwiper', {
                    slidesPerView:3, //一次显示三个
                    spaceBetween: 10,
                });
            })
            return {
                state,
                changeValue
            }
        }
    }
    // export default {
    //     data(){
    //         return{
    //             musiclist:[]
    //         }
    //     },
    //     methods:{
    //         changeValue:function(num){
    //             let res = 0
    //             if(num >= 1000000000){
    //                 res = num/1000000000
    //                 res = res.toFixed(2)+ '亿'
    //             }else if(num >= 10000){
    //                 res = num/10000
    //                 res = res.toFixed(2)+ '万'
    //             }
    //             return res 
    //         }
    //     },
    //     mounted:async function(){
    //         // 接口数据
    //         let result = await getMusicList()
    //         this.musiclist = result.data.result
    //         console.log(this.musiclist)
    //     },
    //     updated(){
    //         var swiper = new Swiper('#musicSwiper', {
    //             slidesPerView:3, //一次显示三个
    //             spaceBetween: 10,
    //         });
    //     },
    //     // 过滤
    //     filter:{

    //     }
    // }

</script>

<style lang="less" scoped>
    .musicList{
        width:7.5rem;
        padding: 0 0.4rem;
        z-index: 10;
        .musicList-top{
            display: flex;
            justify-content: space-between;
             height: 1rem;
            align-items: center;
            .title{
                font-size: 0.4rem;
                font-weight: 900;
            }
            .more{
                border: 1px solid #ccc;
                padding: 0.05rem;
                border-radius: 0.1rem;
                font-size: 0.24rem;
                text-align: center;
                line-height: 0.5rem;
            }
        }
        .mlist{
            .swiper-container{
                width: 100%;
                height: 3rem;
                .swiper-slide{
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    img{
                        width: 100%;
                        height: auto;
                        border-radius: 0.1rem;
                    }
                    .name{
                        height: 0.6rem;
                        width: 100%;
                        font-size: 0.24rem;
                        line-height: 0.4rem;
                    }
                    .count{
                        position: absolute;
                        right: 0.1rem;
                        top: 0.06rem;
                        color: #ccc;
                        display: flex;
                        align-items: center;
                        font-size: 0.2rem;
                        .icon{
                            fill: #ccc;
                        }
                    }
                }
            }
            
        }
    }
</style>
